<template>
  <div class="screen-container">
    <labelNavigation></labelNavigation>

    <!-- 图形展示区 -->
    <div class="screen-body">
      <!-- 左侧图形 -->
      <section class="screen-left">
        <!-- 导航信息 -->
        <div class="top">
          <span class="top-left">︱</span>
          <span class="top-middle">成长报告完成情况分布</span>
        </div>

        <!-- ring图形 -->
        <ring :galleryId="this.Grade" ref="ringUpData" v-if="tableShow"></ring>
      </section>

      <!-- 右侧名单 -->
      <section class="screen-right">
        <div :key="index" v-for="(item, index) in ListData">
          <div class="right-top" v-if="item.data.length != 0">
            <span class="top-left">{{ item.name }}学生名单</span>
            <button class="top-right" @click="share">
              <i class="el-icon-share" style="font-size: 26px"></i>
            </button>
          </div>

          <div class="right-bottom" v-if="item.data.length != 0">
            <div
              class="bottom-name"
              :key="key"
              v-for="(value, key) in item.data"
            >
              {{ value }}
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 分享功能 -->
    <div class="mask" v-if="sharePages">
      <div class="windows" v-if="sharePages">
        <div class="windows-top">
          <div class="top-left">分享到微信</div>
          <button class="top-right" @click="share">
            <i class="el-icon-close" style="font-size: 24px"></i>
          </button>
        </div>
        <div class="windows-bottom">
          <div class="img"></div>
          <div>
            <span>微信扫描二维码，点击右上角</span>
            <span>🌰</span>
            <span>按钮</span>
          </div>
          <div>
            <span>分享给</span>
            <span style="color: #31c27c">好友</span>
            <span>或</span>
            <span style="color: #31c27c">朋友圈</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>


<script>
import ring from "./charts/ring";
import labelNavigation from "../components/background/labelNavigation2";
import {
  getGrade,
  getstudentManage,
  verifyModule,
} from "@/api/statistical/grow";

export default {
  data() {
    return {
      Grade: "",
      tableShow: false,

      ListData: [],
      //完成学生名单
      DoneNameData: [],
      //进行中学生名单
      InProgressNameData: [],
      //未开始学生名单
      NoBegingNameData: [],
      sharePages: false, // 分享页面
    };
  },
  components: {
    labelNavigation,
    ring,
  },
  mounted() {
    this.Grade = this.$route.query.galleryId;
    // this.getMyManagelist()
    this.getverifyModule();
  },
  methods: {
    share() {
      this.sharePages = !this.sharePages;
    },

    // 各模块完成的人的名字
    async getverifyModule() {
      const res = await verifyModule(this.Grade);
      // console.log(res, "verifyModule");
      if (res.rows.length === 0) {
        this.$message.warning("数据为空");
      } else if (res.rows === undefined) {
        this.$message.error(res.msg);
      } else {
        this.setnamedata(res);
        this.tableShow = false;
        this.$nextTick(function () {
          this.tableShow = true;
        });
      }
    },

    setnamedata(res) {
      let data = res.rows[1];
      //已完成
      for (const key in res.rows[1]) {
        this.ListData.push({
          name: key,
          data: data[key],
        });
      }
      // console.log(this.ListData, "ListData");
    },
  },
};
</script>

<style scoped>
.screen-container {
  width: 100%;
  height: 100%;
  /* background-color: #161522;
  color: #fff; */
  box-sizing: border-box;
}

/* 图形展示区 */
.screen-body {
  display: flex;
  margin: 0 13.75rem;
  flex-direction: row;
}

/* 左侧图形 */
.screen-left {
  display: flex;
  flex-direction: column;
  margin: 2.5rem;
  border: 2px solid #f5f5f5;
  width: 40rem;
  height: 100%;
}

/* 导航信息 */
.top {
  margin-top: 15px;
}
.top .top-left {
  font-weight: bold;
  margin: 0 1rem;
  color: rgb(135, 22, 22);
}

/* 右侧名单 */
.screen-right {
  display: flex;
  flex-direction: column;
  width: 40%;
  height: 100%;
  margin: 2.5rem;
  border: 2px solid #f5f5f5;
}

/* 学生状态名单 */
.right-top {
  padding: 0.625rem;
  border-radius: 5px;
}

/* 标签区 */
.right-top .top-left {
  padding: 0 0.5rem 0.625rem 0.5rem;
  border-bottom: 2px solid #871616;
}

.right-top .top-right {
  float: right;
  font-size: 1rem;
  margin-right: 0.625rem;
  background: #fff;
  border: 0px;
  color: rgb(135, 22, 22);
}

/* 学生姓名 */
.right-bottom {
  left: -0.875rem;
  position: relative;

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background: #fff;
  padding: 0.625rem 0 0.3125rem 0;
  border-radius: 5px;
  border: 2px solid #f2e5e5;
}

.bottom-name {
  padding: 0.625rem 1rem;
  column-width: 4rem;
}

/* 分享功能 */
.mask {
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  justify-content: center;

  background-color: rgba(56, 55, 55, 0.651);
  z-index: 9;
}

.windows {
  display: flex;
  flex-direction: column;
  margin-top: 6.25rem;
  width: 30%;
  height: 37.5rem;
  align-items: center;
  background-color: rgb(255, 255, 255);
}

.windows-top {
  width: 100%;
  display: flex;
  position: relative;
  border-bottom: 2px solid #f5f5f5;
}

.windows-top .top-left {
  padding: 0.75rem;
  margin: auto;
  font-size: 1rem;
}

.windows-top .top-right {
  top: 0.3125rem;
  right: 0.0625rem;
  position: absolute;

  border: 0;
  padding: 0;
  font-size: 1.875rem;
  margin-right: 1.25rem;
  background: #ffffff;
}

.windows-bottom {
  display: flex;
  text-align: center;
  flex-direction: column;
}

.windows-bottom .img {
  width: 12.5rem;
  height: 12.5rem;
  margin: 2.5rem;
  text-align: center;
  background: #f5f5f5;
}
</style>
